<template>
  <div class="app-container">
    <MmvTitle title="车损费用明细"></MmvTitle>
    <el-table :data="alsoCarItems" border>
      <el-table-column label="收费项名称" prop="deductionsFor">
        <template slot-scope="{ row }">
          <el-input v-model="row.deductionsFor" v-if="row.source==1"></el-input>
          <span v-else>{{ row.deductionsFor }}</span>
        </template>
      </el-table-column>
      <el-table-column label="扣款金额">
        <template slot-scope="{row}">
          <el-input v-model="row.deductionsAmount" placeholder="请输入金额" @keyup.native="row.deductionsAmount= oninput(row.deductionsAmount,2)"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="danger" icon="el-icon-delete" size="mini" v-if="row.source==1" @click="deleteChargingItems(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    费用总计：{{ vehicleDamageTotal }}元
    <el-col :span="24" style="text-align: center">
      <el-button icon="el-icon-plus" @click="addChargingItems">添加收费项</el-button>
    </el-col>

    <MmvTitle title="车损结算方式"></MmvTitle>

    <el-row style="margin: 20px">
      <el-radio-group v-model="settlementMethod" style="width: 100%" :disabled="vehicleDamageTotal<=0">
        <el-radio :label="2">单独收费</el-radio>
        <el-radio :label="1" v-if="depositList.length>1">押金抵扣</el-radio>
        <el-radio :label="1" disabled v-else>押金抵扣<span style="color: red">(未支付押金)</span></el-radio>
      </el-radio-group>
    </el-row>
    <el-table :data="depositList" border v-if="settlementMethod==1">
      <el-table-column label="支付方式" prop="paymentMethod"></el-table-column>
      <el-table-column label="已付金额" prop="paidAmount"></el-table-column>
      <el-table-column label="抵扣金额">
        <template slot-scope="{row}">
          <span v-if="row.type==3">{{ supplementary }}</span>
          <el-input v-else v-model="row.deductionsAmount" placeholder="请输入金额" :disabled="vehicleDamageTotal<=0" @keyup.native="row.deductionsAmount= oninput(row.deductionsAmount,2,row.paidAmount)"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <div class="dialog-footer" style="text-align: end;">
      <el-button @click="close">取消</el-button>
      <el-button :loading="submitBtnLoading" type="primary" @click="submitData">确定</el-button>
    </div>

  </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue';
import {depositRefundDetail, vehicleDamage} from "@/api/order";

export default {
  components: {
    MmvTitle
  },
  props: ['orderNo'],
  data() {
    return {
      alsoCarItems: [], // 收费项列表
      settlementMethod: 2,
      depositList: [],
      loading: true,
      submitBtnLoading: false,
    }
  },
  computed: {
    // 计算车损总和
    vehicleDamageTotal() {
      let total = 0
      this.alsoCarItems.forEach(item => {
        total += Number(item.deductionsAmount)
      })
      return total.toFixed(2)
    },
    // 计算抵扣费用
    deduction() {
      let total = 0
      this.depositList.forEach(item => {
        if (item.type < 3) {
          total += Number(item.deductionsAmount)
        }
      })
      return total.toFixed(2)
    },
    // 计算补缴费用
    supplementary() {
      let total =  Number(this.vehicleDamageTotal - this.deduction).toFixed(2)
      this.depositList.forEach(item => {
        if (item.type == 3 ) {
          item.deductionsAmount =total
        }
      })
      return total<0?0:total
    }
  },
  watch: {
    deduction: function(val) {
      console.log(val,this.vehicleDamageTotal)
     if(Number(val)>Number(this.vehicleDamageTotal)){
       this.$message.error('抵扣费用不能大于车损费用总和')
     }
    }
  },
  mounted() {
    depositRefundDetail(this.orderNo).then(response => {
      this.alsoCarItems = response.data.settlementList || [];
      this.depositList = response.data.depositList || [];
      this.loading = false
    });
  },
  methods: {
    addChargingItems() {
      this.alsoCarItems.push({
        source: 1,
        deductionsAmount: 0,
        deductionsFor: '',
        index: new Date().getTime(),
      })
    },
    deleteChargingItems(row) {
      const index = this.alsoCarItems.map(f => f.index).indexOf(row.index);
      this.alsoCarItems.splice(index, 1)
    },
    submitData() {
      for (let item of this.alsoCarItems) {
        if (!item.deductionsFor) {
          this.$message.error('收费项名称不能为空')
          return;
        } else if (!item.deductionsAmount) {
          this.$message.error('费用不能为空')
          return;
        }
      }
      if (this.settlementMethod == 1 && this.deduction <= 0) {
        this.$message.error('押金抵扣费用为0,请选择单独缴费')
        return;
      }
      if (this.supplementary < 0) {
        this.$message.error('请检查押金抵扣金额')
        return;
      }
      this.submitBtnLoading = true
      vehicleDamage({orderNo: this.orderNo, alsoCarItems: this.alsoCarItems, deductions: this.depositList, settlementMethod: this.settlementMethod}).then(response => {
        this.$message.success(response.msg)
        this.close()
      }).finally(err => {
        this.submitBtnLoading = false
      });
    },
    close() {
      this.$emit("close")
    }
  },

}
</script>
